import 'package:flutter/material.dart';
import 'package:xbaistack/common/toast.dart';
import 'package:xbaistack/widget/click_able.dart';

class ClickPage extends StatefulWidget {
  const ClickPage({super.key});

  @override
  State<ClickPage> createState() => _ClickPageState();
}

class _ClickPageState extends State<ClickPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("万能点击组件")),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 普通文本（点击透明度发申变化）
            Clickable(
              child: const Text("点我"),
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
            ),
            const SizedBox(height: 20),

            // 色块背景（点击背景颜色透明度发生变化）
            Clickable(
              color: Colors.redAccent,
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
              child: const Text("点我"),
            ),
            const SizedBox(height: 20),

            // 色块背景（点击背景颜色在指定颜色之间切换）
            Clickable(
              color: Colors.redAccent,
              pressedColor: Colors.greenAccent,
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
              child: const Text("点我"),
            ),
            const SizedBox(height: 20),

            // 自定义按钮效果（点击背景颜色和阴影颜色均会发生变化）
            Clickable(
              builder: (state, child) {
                final pressed = state == WidgetState.pressed;
                final color = pressed ? Colors.greenAccent : Colors.blueAccent;
                return Container(
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: color,
                    borderRadius: BorderRadius.circular(60),
                    boxShadow: [
                      BoxShadow(
                        color: color,
                        blurRadius: 10,
                        offset: const Offset(0, 5),
                      ),
                    ],
                  ),
                  child: child,
                );
              },
              pressedColor: Colors.greenAccent,
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
              child: const Text("点我"),
            ),
            const SizedBox(height: 20),

            // 自定义图片背景（点击切换背景图片）
            Clickable(
              builder: (state, child) {
                return Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 10,
                    horizontal: 50,
                  ),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(
                        'https://workyd.com/image/avator.png',
                      ),
                    ),
                    //  DecorationImage(
                    //   image: state == WidgetState.pressed
                    //       ? const AssetImage("assets/btn-a.png")
                    //       : const AssetImage("assets/btn-b.png"),
                    // ),
                  ),
                  child: child,
                );
              },
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
              child: const Text("点我"),
            ),
            const SizedBox(height: 20),

            // 设置项效果（点击整体透明度发生变化）
            Clickable(
              color: Colors.white,
              onTap: () => Toast.showToast("点了"),
              onLongPress: (active) => Toast.showToast(active ? "长按" : "取消长按"),
              child: const Padding(
                padding: EdgeInsets.all(15),
                child: Row(children: [Expanded(child: const Text("点我"))]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
